<script lang="ts">
	import type { PageData } from './$types'

	import { Tabs, TabItem, Range, Label, Progressbar } from 'flowbite-svelte'
	import {
		UserCircleSolid,
		GridSolid,
		AdjustmentsVerticalSolid,
		ClipboardSolid,
		UserSettingsSolid,
	} from 'flowbite-svelte-icons'
	import IndicatorsCorrelationMatrix from '$lib/IndicatorsCorrelationMatrix.svelte'
	import { convertToKlt } from '$lib'

	export let data: PageData

	// console.log('data:', data, 'params:', $page.params)
</script>

<div class="bg-gray-200 w-full h-svh flex flex-col">
	<div class="w-full bg-gray-200">
		Spearman
		相关性系数是一种非参数统计方法，用于衡量两个变量之间的单调关系强度，无论这种关系是否线性。Spearman
		相关系数的取值范围也是从-1到+1：<br />
		+1: 表示完全正相关，即一个变量增加时，另一个变量也严格按确定的比例增加。 0: 表示没有明显的单调关系或关联。
		-1: 表示完全负相关，即一个变量增加时，另一个变量按确定的比例减少。<br /> <br />
		判断正相关或负相关的具体数值界限没有绝对的标准，但通常可以根据以下分类来解释Spearman相关系数的大小：<br
		/>
		<p class="bg-blue-500">
			弱相关：大约在0.2至0.4（无论是正数还是负数），表示存在一定程度的正相关或负相关，但关系较弱。
		</p>
		<p class="bg-green-500">中等相关：大约在0.4至0.6，表明变量之间有较明显的正相关或负相关趋势。</p>
		<p class="bg-red-500">强相关：大于0.6（接近1或-1），表示变量间存在很强的正相关或负相关关系。</p>
		<br />
		因此，当Spearman相关系数的绝对值大于0.6时，通常认为两个变量之间存在较强的正相关或负相关关系；如果在0.4至0.6之间，则视为中等程度的相关；小于0.4则认为是弱相关或无显著相关。需要注意的是，这些阈值并非固定规则，实际应用中应根据研究背景和目的灵活判断。
	</div>
	<div class="grow w-full pt-1 overflow-auto flex flex-col relative">
		<Tabs
			tabStyle="full"
			class="flex "
			activeClasses="px-1 pt-1 pb-2 text-primary-600 bg-gray-100  dark:bg-gray-800 dark:text-primary-500"
			inactiveClasses="px-1 pt-1 pb-2 text-gray-500  hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
			contentClass="p-0 bg-gray-50  dark:bg-gray-800"
		>
			<TabItem open={data.open.M005} title="5分钟线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">5分钟</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					adsasdfasdfasf 5分钟线数据 indicators
					<IndicatorsCorrelationMatrix
						security_id={data.security_id}
						klt={convertToKlt('M005')}
						size={data.size}
					/>
				</div>
			</TabItem>

			<TabItem open={data.open.M015} title="15分钟线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">15分钟</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					adsasdfasdfasf 15分钟线数据 indicators
					<IndicatorsCorrelationMatrix
						security_id={data.security_id}
						klt={convertToKlt('M015')}
						size={data.size}
					/>
				</div>
			</TabItem>

			<TabItem open={data.open.M030} title="30分钟线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">30分钟</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					adsasdfasdfasf 30分钟线数据 indicators
					<IndicatorsCorrelationMatrix
						security_id={data.security_id}
						klt={convertToKlt('M030')}
						size={data.size}
					/>
				</div>
			</TabItem>

			<TabItem open={data.open.M060} title="60分钟线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">60分钟</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					adsasdfasdfasf text-primary-600分钟线数据 indicators
					<IndicatorsCorrelationMatrix
						security_id={data.security_id}
						klt={convertToKlt('M060')}
						size={data.size}
					/>
				</div>
			</TabItem>

			<TabItem open={data.open.DAY} title="日线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">日线</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					adsasdfasdfasf 日线数据 indicators
					<IndicatorsCorrelationMatrix
						security_id={data.security_id}
						klt={convertToKlt('DAY')}
						size={data.size}
					/>
				</div>
			</TabItem>

			<TabItem open={data.open.WEEK} title="周线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">周线</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					adsasdfasdfasf 周线数据 indicators
					<IndicatorsCorrelationMatrix
						security_id={data.security_id}
						klt={convertToKlt('WEEK')}
						size={data.size}
					/>
				</div>
			</TabItem>

			<TabItem open={data.open.MONTH} title="月线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">月线</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					adsasdfasdfasf 月线数据 indicators
					<IndicatorsCorrelationMatrix
						security_id={data.security_id}
						klt={convertToKlt('MONTH')}
						size={data.size}
					/>
				</div>
			</TabItem>
		</Tabs>
	</div>
</div>
